<template>
    <Row :gutter="30">
        <Card>
            <Row>
                <Tabs @on-click="handleClick">
                    <TabPane label="发件查询" name="first">
                        <!-- 发件查询表格 -->
                        <Row class="form-row">
                            <Form label-position="right" :label-width="90" inline>
                                <FormItem label="快递单号" prop="treeid">
                                    <div class="filters-input">
                                    <Input placeholder="快递单号" v-model="valueCode"/>
                                    </div>
                                </FormItem>
                                <FormItem label="快递公司">
                                    <div class="filters-input">
                                    <el-select :clearable="true" v-model="valueComany" placeholder="快递公司">
                                        <el-option v-for="item in optionsCompany" :key="item.id" :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                    </div>
                                </FormItem>
                                <FormItem label="支付状态">
                                    <div class="filters-input">
                                    <el-select :clearable="true" v-model="valuePayStatus" placeholder="支付状态">
                                        <el-option v-for="item in optionsSendStatus" :key="item.value" :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    </div>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" size="large" icon="md-search" @click="searchSend()">
                                        查询
                                    </Button>
                                </FormItem>
                            </Form>
                        </Row>

                        <Table stripe border :columns="columnsSend" :data="firstTableData" size="large" ref="table"/>
                        <Page style="margin: 10px 0;" :total="pageTotalAccept" :current="pageNumAccept"
                              :page-size="pageSizeAccept" show-total show-sizer show-elevator
                              @on-change="handlePageAccept" @on-page-size-change='handlePageSizeAccept'>
                        </Page>
                    </TabPane>
                    <TabPane label="收件查询" name="second">
                        <Row class="form-row">
                            <Form label-position="right" :label-width="80" inline>
                                <FormItem label="快递单号" prop="treeid">
                                    <div class="filters-input">
                                    <Input placeholder="快递单号" v-model="valueCode"/>
                                    </div>
                                </FormItem>
                                <FormItem label="收货人电话">
                                    <div class="filters-input">
                                    <Input placeholder="收货人电话" v-model="valuePhone"/>
                                    </div>
                                </FormItem>
                                <FormItem label="快递状态">
                                    <div class="filters-input">
                                    <el-select :clearable="true" v-model="valueStatus" placeholder="快递状态">
                                        <el-option v-for="item in optionsStatus" :key="item.value" :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    </div>
                                </FormItem>
                                <FormItem label="快递类型">
                                    <div class="filters-input">
                                    <el-select :clearable="true" v-model="valueType" placeholder="快递类型">
                                        <el-option v-for="item in optionsType" :key="item.value" :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    </div>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" size="large" icon="md-search" @click="searchAccept()">
                                        查询
                                    </Button>
                                </FormItem>
                            </Form>
                        </Row>
                        <!-- 收件查询表格 -->
                        <Table stripe border :columns="columnsAccept" :data="secondTableData" size="large" ref="table"/>
                        <Page style="margin: 10px 0;" :total="pageTotalSend" :current="pageNumSend"
                              :page-size="pageSizeSend" show-total show-sizer show-elevator @on-change="handlePageSend"
                              @on-page-size-change='handlePageSizeSend'>
                        </Page>
                    </TabPane>
                </Tabs>
            </Row>
        </Card>
    </Row>
</template>
<script>
    import DeptTree from "_c/dept-tree";

    export default {
        components: {
            DeptTree
        },
        data() {
            // 快递状态
            return {
                valuePhone: "",
                valueCode: "",
                valueComany: "",
                valueStatus: "",
                valuePayStatus: "",
                //查询条件
                treeid: 0,
                data1: [],
                filter: {},
                //收件状态
                optionsStatus: [
                    {
                        value: "1",
                        label: "快递员入库"
                    },
                    {
                        value: "2",
                        label: "待收货"
                    },
                    {
                        value: "3",
                        label: "已收货"
                    },
                    {
                        value: "4",
                        label: "退货"
                    },
                    {
                        value: "5",
                        label: "确认收货"
                    }
                ],
                //发件支付状态
                optionsSendStatus: [
                    {
                        value: "1",
                        label: "未付款"
                    },
                    {
                        value: "2",
                        label: "已付款"
                    }
                ],
                valueStatus: "",
                optionsCompany: [],
                //快递类型
                optionsType: [
                    {
                        value: "1",
                        label: "小型"
                    },
                    {
                        value: "2",
                        label: "中型"
                    },
                    {
                        value: "3",
                        label: "大型"
                    },
                    {
                        value: "4",
                        label: "特大型"
                    }
                ],
                valueType: "",
                //收件表格
                columnsAccept: [
                    {
                        title: "快递单号",
                        key: "code"
                    },
                    {
                        title: "快递大小",
                        key: "type",
                        render: (h, params) => {
                            let label = "其他";
                            this.optionsType.map(item => {
                                if (item.value == params.row.type) {
                                    label = item.label;
                                }
                            });
                            return h("span", label);
                        }
                    },
                    {
                        title: "收货人电话",
                        key: "phone"
                    },
                    {
                        title: "入库状态",
                        key: "status",
                        render: (h, params) => {
                            let label = "其他";
                            this.optionsStatus.map(item => {
                                if (item.value == params.row.status) {
                                    label = item.label;
                                }
                            });
                            return h("span", label);
                        }
                    },
                    {
                        title: "快递员姓名",
                        key: "keName"
                    },
                    {
                        title: "小区",
                        key: "deTitle"
                    },
                    {
                        title: "快递员入库时间",
                        sortable: true,
                        key: "empTime"
                    },
                    {
                        title: "物业入库时间",
                        sortable: true,
                        key: "PropertyTime"
                    },
                    {
                        title: "其他状态时间",
                        sortable: true,
                        key: "updateTime"
                    }
                ],
                //发件表格
                columnsSend: [
                    {
                        title: "快递单号",
                        key: "code"
                    },
                    {
                        title: "重量",
                        key: "weight"
                    },
                    {
                        title: "小区",
                        key: "deTitle"
                    },
                    {
                        title: "包裹描述",
                        key: "description"
                    },
                    {
                        title: "金额",
                        sortable: true,
                        key: "amount"
                    },
                    {
                        title: "快递公司",
                        key: "keName"
                    },
                    {
                        title: "支付状态",
                        key: "payStatus",
                        render: (h, params) => {
                            let label = "未付款";
                            this.optionsStatus.map(item => {
                                if (1 == params.row.payStatus) {
                                    label = "未付款";
                                } else {
                                    label = "已付款";
                                }
                            });
                            return h("span", label);
                        }
                    },
                    {
                        title: "快递员",
                        key: "keName"
                    },
                    {
                        title: "支付时间",
                        sortable: true,
                        key: "payTime"
                    }
                ],
                //页码
                pageNumAccept: 1,
                pageNumSend: 1,
                //每页数量
                pageSizeAccept: 10,
                pageSizeSend: 10,
                //总数
                pageTotalAccept: 0,
                pageTotalSend: 0,
                firstTableData: [],
                secondTableData: []
            };
            // 快递单号、快递大小、收货人电话、入库状态、快递员姓名、物业人员、快递员入库时间、物业入库时间、其他状态时间
        },
        created: function () {
            this.loadSendData();
        },

        methods: {
            //查询发件
            searchSend() {
                // if (this.treeid != 0) {
                let params = {};
                params.companyId = this.valueComany; //快递公司
                params.code = this.valueCode; //快递单号
                params.payStatus = this.valuePayStatus; //支付状态
                // params.deptId = this.treeid; //小区id
                params.pageNum = this.pageNumSend;
                params.pageSize = this.pageSizeSend;
                this.postRequest("/api/kdSendgoods/loadData", params).then(res => {
                    this.firstTableData = res;
                });
                // } else {
                //   this.$Message.error("请选择部门");
                // }
            },
            //收件查询
            searchAccept() {
                // if (this.treeid != 0) {
                let params = {};
                // params.companyId = this.valueComany; //快递公司
                params.phone = this.valuePhone; //电话
                params.status = this.valueStatus; //快递状态
                params.code = this.valueCode; //快递单号
                // params.deptId = this.treeid; //小区id
                params.type = this.valueType; //快递类型
                params.pageNum = this.pageNumSend;
                params.pageSize = this.pageSizeSend;
                this.postRequest("/api/kdAcceptgoods/loadData", params).then(res => {
                    this.secondTableData = res.list;
                    this.pageTotal = res.total;
                });
                // } else {
                //   this.$Message.error("请选择部门");
                // }
            },

            // tabs选择事件
            handleClick(tab, event) {
                if (tab == "first") {
                    this.loadSendData();
                } else {
                    this.loadAcceptData();
                }
            },

            // 根据部门id获取发件数据
            loadSendData() {
                let params = this.filter;
                // params.id = this.treeid;
                params.pageNum = this.pageNumSend;
                params.pageSize = this.pageSizeSend;
                this.postRequest("/api/kdSendgoods/kdSendgoods", params).then(res => {
                    this.optionsCompany = res.kd;
                    this.firstTableData = res.data;
                });
            },
            // 根据部门id获取收件数据
            loadAcceptData() {
                let params = this.filter;
                // params.id = this.treeid;
                params.pageNum = this.pageNumAccept;
                params.pageSize = this.pageSizeAccept;
                this.postRequest("/api/kdAcceptgoods/loadData", params).then(res => {
                    this.secondTableData = res.list;
                    this.pageTotal = res.total;
                    // this.optionsCompany = res.kd;
                });
            },
            //收件分页相关
            handlePageAccept(value) {
                this.pageNumAccept = value;
                // if (this.treeid != 0) {
                this.loadAcceptData();
                // } else {
                //   this.$Message.error("请选择部门");
                // }
            },
            handlePageSend(value) {
                this.pageNumSend = value;
                // if (this.treeid != 0) {
                this.loadSendData();
                // } else {
                //   this.$Message.error("请选择部门");
                // }
            },
            //发件分页相关
            handlePageSizeAccept(value) {
                this.pageSizeAccept = value;
                // if (this.treeid != 0) {
                this.loadAcceptData();
                // } else {
                //   this.$Message.error("请选择部门");
                // }
            },
            handlePageSizeSend(value) {
                this.pageSizeSend = value;
                // if (this.treeid != 0) {
                this.loadSendData();
                // } else {
                //   this.$Message.error("请选择部门");
                // }
            }
        }
    };
</script>
